Lookups

Lookup is an advanced inline search form.

BaseprototypeNot Compatible with S1 Mobile

Preview

Code

<div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="lookup">Accounts</label>
    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
      <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
      </svg>
      <input id="lookup" class="slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" />
    </div>
  </div>
  <div class="slds-lookup__menu" role="listbox">
    <div class="slds-lookup__item">
      <button class="slds-button">
        <svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
        </svg>&quot;ac&quot; in Accounts</button>
    </div>
    <ul class="slds-lookup__list" role="presentation">
      <li class="slds-lookup__item">
        <a id="s01" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Paddy&#x27;s Pub</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s02" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Tyrell Corporation</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s03" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Paper St. Soap Company</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s04" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Nakatomi Investments</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s05" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Acme Landscaping</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s06" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>ACME Construction</a>
      </li>
    </ul>
    <div class="slds-lookup__item">
      <button class="slds-button">
        <svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
        </svg>Add Account</button>
    </div>
  </div>
</div>

Single Selectprototype

Preview

Code

<div class="slds-lookup slds-has-selection" data-select="single" data-scope="single" data-typeahead="false">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="lookup">Accounts</label>
    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
      <svg aria-hidden="true" class="slds-input__icon">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
      </svg>
      <div class="slds-pill_container slds-show">
        <a href="#void" class="slds-pill">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-pill__icon">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>
          <span class="slds-pill__label">Pied Piper</span>
          <button class="slds-button slds-button--icon-bare slds-pill__remove">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">Remove</span>
          </button>
        </a>
      </div>
      <input id="lookup" class="slds-input slds-hide" type="text" aria-autocomplete="list" role="combobox" aria-expanded="false" aria-activedescendant="" />
    </div>
  </div>
</div>

Multi Selectprototype

Preview

Code

<div class="slds-lookup slds-has-selection" data-select="multi" data-scope="single" data-typeahead="true">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="lookup">Accounts</label>
    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
      <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
      </svg>
      <input id="lookup" class="slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="false" aria-activedescendant="" />
    </div>
    <div class="slds-pill_container">
      <a href="#void" class="slds-pill">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-pill__icon">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
        </svg>
        <span class="slds-pill__label">Pied Piper</span>
        <button class="slds-button slds-button--icon-bare slds-pill__remove">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Remove</span>
        </button>
      </a>
      <a href="#void" class="slds-pill">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-pill__icon">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
        </svg>
        <span class="slds-pill__label">Weyland-Yutani Corporation</span>
        <button class="slds-button slds-button--icon-bare slds-pill__remove">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Remove</span>
        </button>
      </a>
    </div>
  </div>
</div>

Single ScopeprototypeNot Compatible with S1 Mobile

Preview

Code

<div class="slds-lookup" data-select="single" data-scope="single" data-typeahead="false">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="lookup">Accounts</label>
    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
      <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
      </svg>
      <div class="slds-pill_container slds-hide"></div>
      <input id="lookup" class="slds-input slds-show" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" />
    </div>
  </div>
  <div class="slds-lookup__menu" role="listbox">
    <ul class="slds-lookup__list" role="presentation">
      <li class="slds-lookup__item">
        <a id="s01" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Paddy&#x27;s Pub</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s02" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Tyrell Corporation</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s03" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Paper St. Soap Company</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s04" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Nakatomi Investments</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s05" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>Weylan-Yutani Corporation</a>
      </li>
    </ul>
    <div class="slds-lookup__item">
      <button class="slds-button">
        <svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
        </svg>Add Account</button>
    </div>
  </div>
</div>

Multi ScopeprototypeNot Compatible with S1 Mobile

Preview

Code

<div class="slds-lookup" data-select="multi" data-scope="multi" data-typeahead="false">
  <div class="slds-form-element">
    <div class="slds-grid slds-form-element__control slds-box--border">
      <label class="slds-form-element__label slds-text-align--right" for="lookup">
        <p class="slds-truncate slds-align-middle">Contacts</p>
      </label>
      <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-align-middle">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-user slds-icon--small slds-shrink-none">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
        </svg>
        <button class="slds-button slds-button--icon-bare slds-button-space-left slds-shrink-none">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Filter</span>
        </button>
      </div>
      <input id="lookup" class="slds-input--bare" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" placeholder="Search Contacts" />
    </div>
    <div class="slds-pill_container slds-hide"></div>
  </div>
  <div class="slds-lookup__menu" role="listbox">
    <ul class="slds-lookup__list" role="presentation">
      <li class="slds-lookup__item">
        <a id="s01" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-user slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
          </svg>Diana Rios</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s02" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-user slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
          </svg>Nicole Woods</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s03" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-user slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
          </svg>James Freeman</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s04" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-user slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
          </svg>Gloria Pearson</a>
      </li>
      <li class="slds-lookup__item">
        <a id="s05" href="#" role="option">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-user slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
          </svg>Jordan Dean</a>
      </li>
    </ul>
    <div class="slds-lookup__item">
      <button class="slds-button">
        <svg aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon--small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
        </svg>Add Account</button>
    </div>
  </div>
</div>

Advanced ModalprototypeNot Compatible with S1 Mobile

Preview

Code

<div>
  <div aria-hidden="false" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open">
    <div class="slds-modal__container slds-modal--large">
      <div class="slds-modal__header">
        <button class="slds-button slds-button--icon-inverse slds-modal__close">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
            <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close</span>
        </button>
        <h2 class="slds-text-heading--medium">Account Name</h2>
      </div>
      <div class="slds-modal__content">
        <div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
          <div class="slds-form-element slds-p-top--medium slds-p-horizontal--medium slds-m-bottom--small">
            <label class="slds-form-element__label" for="lookup">Accounts</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
              <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
              </svg>
              <input id="lookup" class="slds-input" type="text" aria-haspopup="true" aria-autocomplete="list" role="combobox" aria-activedescendant="" />
            </div>
          </div>
          <table class="slds-table slds-table--bordered slds-no-row-hover" role="listbox">
            <thead>
              <tr>
                <th colspan="4" scope="col">
                  <div class="slds-float--right">
                    <button class="slds-button slds-button--icon-bare slds-button--icon-x-small">
                      <svg aria-hidden="true" class="slds-button__icon">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
                      </svg>
                      <span class="slds-assistive-text">Filter List</span>
                    </button>
                    <button class="slds-button slds-button--icon-bare slds-button--icon-x-small">
                      <svg aria-hidden="true" class="slds-button__icon">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#sort"></use>
                      </svg>
                      <span class="slds-assistive-text">Sort</span>
                    </button>
                  </div>5 Results, sorted by relevancy</th>
              </tr>
              <tr>
                <th scope="col">Account Name</th>
                <th scope="col">Location</th>
                <th scope="col">Secondary Column</th>
                <th scope="col">Tertiary Column</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">
                  <a id="s01" href="#" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>Acme Landscape</a>
                </th>
                <td>Seattle, WA</td>
                <td>Secondary Field</td>
                <td>Tertiary Field</td>
              </tr>
              <tr>
                <th scope="row">
                  <a id="s02" href="#" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>ACME Construction</a>
                </th>
                <td>San Francisco, CA</td>
                <td>Secondary Field</td>
                <td>Tertiary Field</td>
              </tr>
              <tr>
                <th scope="row">
                  <a id="s03" href="#" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>Action Sports</a>
                </th>
                <td>Madison, WI</td>
                <td>Secondary Field</td>
                <td>Tertiary Field</td>
              </tr>
              <tr>
                <th scope="row">
                  <a id="s04" href="#" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>Moderno Bistro</a>
                </th>
                <td>Acton, OH</td>
                <td>Secondary Field</td>
                <td>Tertiary Field</td>
              </tr>
              <tr>
                <th scope="row">
                  <a id="s05" href="#" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>Cozy Kitchen</a>
                </th>
                <td>Acton, CA</td>
                <td>Secondary Field</td>
                <td>Tertiary Field</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="slds-modal__footer slds-modal__footer--directional">
        <button class="slds-button slds-button--neutral">Cancel</button>
        <button class="slds-button slds-button--neutral">New Account</button>
      </div>
    </div>
  </div>
  <div class="slds-backdrop slds-backdrop--open"></div>
</div>

Component Overview

The lookup can parse through single or multi scoped datasets. The parsed dataset can be filtered by single or multi option selects.

You can find the lookup component throughout most data fields that allow inline inputs. Most commonly used on record home and object home.

Accessibility

Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to navigate up and down the results list. Use the appropriate ARIA attributes in your markup in order to effectively communicate the relationship between the input field and the results list to users of assistive technology.

Expected markup:

  • Input field has attributes role="combobox", aria-autocomplete="list"
  • Input field has an aria-expanded attribute whose value is false when the results list is hidden, true when the results list is visible
  • Input field has an aria-activedescendant attribute whose value is the id of the highlighted results list option, no value if nothing’s highlighted in the list
  • Results list is an <ul role="presentation">, where each item is containing an <a href="#void" role="option">

Expected keyboard interactions:

  • Character keys filter the list
  • Up and down arrow keys cycle through the available options in the list and update the input field’s aria-activedescendant value
  • Enter key selects highlighted option and collapses the results list
  • Escape key collapses the results list

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-lookup
Applied to:

<div>

Outcome:

Initializes lookup

Required:

Required

Comments:

Accepts [data-select] and [data-scope] attributes with the values of single/multi

.slds-lookup__menu
Applied to:

<div>

Outcome:

Initializes lookup results list container

Required:

Required

Comments:

Applies positioning and container styles

.slds-lookup__list
Applied to:

<ul>

Outcome:

Initializes lookup results list

Required:

Required

Comments:

--

.slds-lookup__item
Applied to:

<li>

Outcome:

Results list item

Required:

Required

Comments:

--

.slds-form-element
Applied to:

<div>

Outcome:

Initializes lookup form element

Required:

Required

Comments:

Wraps <input> and .slds-pill_container